// 顶部按钮父级 做事件委托
const bgli = document.querySelector('.bgfather')
// 需要平移的整体大图片盒子
const lunbo = document.querySelector('.bigboxpic')
// 下一张按钮
const picnext = document.querySelector('.picnext')
// 上一张按钮
const picprev = document.querySelector('.picprev')
// 替换整体大背景
const bbbg = document.querySelector('.wzhbg')
// 添加事件监听
picnext.addEventListener('click', next)
picprev.addEventListener('click', prev)
// 设置全局记录
let i = 0
// 提前设置一次背景
bbbg.style.background = `url(https://blz.nosdn.127.net/1/tm/blz/overwatch/maps/Toronto_Push.jpg)`
// 事件委托 点击替换背景以及轮播图
bgli.addEventListener('click', function (e) {
  if (e.target.tagName === 'DIV') {
    // 双向绑定
    let num = e.target.dataset.id
    // 更新全局记录为了按钮顺序不乱
    i = num
    lunbo.style.transform = `translateX(${num * -50}vw)`
    // 查找对应的id值得img标签的src里的值
    let url = lunbo.querySelector(`img[data-id="${num}"]`).src
    console.log(url);
    // 修改背景
    bbbg.style.background = `url(${url})`
  }
})
// 下一张事件
function next() {
  i++
  if (i == 8) i = 7
  lunbo.style.transform = `translateX(${i * -50}vw)`
  let url = lunbo.querySelector(`img[data-id="${i}"]`).src
  console.log(url);
  bbbg.style.background = `url(${url})`
}
// 上一张事件
function prev() {
  i--
  if (i <= 0) i = 0
  lunbo.style.transform = `translateX(${i * -50}vw)`
  let url = lunbo.querySelector(`img[data-id="${i}"]`).src
  console.log(url);
  bbbg.style.background = `url(${url})`
}

